<template>
  <!-- 经纪人结佣-经纪人奖励-列表-->
  <div class="brokerReward">
    <el-form :model="typeForm" :inline="true">
      <el-form-item label="城市：" prop="cityId">
        <el-select filterable v-model="typeForm.cityId" placeholder="请选择城市" @change="geCompanyId">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({city,cityId},index) in cityOption"
            :key="index"
            :label="city"
            :value="cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经纪公司：" prop="companyId">
        <el-select filterable v-model="typeForm.companyId" placeholder="请选择角色">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({companyName,companyId},index) in companyOption"
            :key="index"
            :label="companyName"
            :value="companyId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经纪人：" prop="brokerNameOrPhone">
        <el-input
          v-model.trim="typeForm.brokerNameOrPhone"
          autocomplete="off"
          placeholder="请输入姓名/手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="奖励方式：" prop="awardType">
        <el-select filterable v-model="typeForm.awardType" placeholder="请选择奖励方式">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({label,value},index) in awardTypeOption"
            :key="index"
            :label="label"
            :value="value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结佣时间：">
        <el-date-picker
          v-model="typeForm.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <tableList
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></tableList>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
import tableList from "../../common/tableList";
export default {
  components: {
    tableList
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      tableData: [],
      tableInfos: [
        { label: "城市", prop: "cityName" },
        { label: "角色", prop: "brokerType" },
        { label: "经纪公司", prop: "companyName" },
        { label: "姓名", prop: "brokerName" },
        { label: "手机号", prop: "brokerPhone" },
        { label: "结佣笔数", prop: "brokerageNum" },
        { label: "经纪人奖励金额", prop: "award" },
        { label: "税费（元）", prop: "taxFee" },
        { label: "税率", prop: "taxRate" },
        { label: "奖励方式", prop: "awardType" },
        { label: "应付金额", prop: "should" },
        { label: "操作", prop: "changeBtn" }
      ],
      awardTypeOption: [
        { label: "购物卡", value: "1" },
        { label: "现金", value: "2" }
      ],
      cityOption: [],
      companyOption: [],
      typeForm: {
        cityId: "",
        brokerNameOrPhone: "",
        awardType: "",
        time: ["", ""],
        companyId: ""
      },
      totalRows: {},
      firstLoad: true,
      tableChangeBtns: [{ label: "成交详情", type: "view", fn: this.view }]
    };
  },
  created() {},
  mounted() {},
  methods: {
    //获取经纪公司id
    geCompanyId(cityId) {
      this.typeForm.companyId = "";
      this.companyOption = [];
      if (!cityId) {
        return;
      }
      this.axios
        .post(api.getCompanyIdBycityId, { cityId: cityId })
        .then(res => {
          if (res.data.code == 200) {
            this.companyOption = res.data.data;
          }
        });
    },
    tableFormatter(prop, val) {
      let moneyFormatter = ["award", "taxFee", "should"];
      if (moneyFormatter.includes(prop)) {
        return !val ? "0.00" : utils.formatMoney(val);
      }
      if (prop === "brokerPhone") {
        return utils.formatPhoneNumber(val) || "——";
      }
      let propMap = {
        brokerType: { "0": "网络推客", "3": "职业经纪人", "5": "经纪公司" }
      };
      if (["taxRate"].includes(prop)) {
        if (!val && val !== 0) {
          return "——";
        } else {
          return val + "%";
        }
      }
      if (prop === "awardType") {
        return { "1": "购物卡", "2": "现金" }[val] || "";
      }
      return propMap[prop] ? propMap[prop][val] || "——" : val || "——";
    },
    summaryMethod() {
      return this.totalRows;
    },
    searchList(pageNum) {
      this.typeForm.time = this.typeForm.time || [];
      let strDate = this.timeString(this.typeForm.time[0]);
      let endDate = this.timeString(this.typeForm.time[1]);
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        cityId: this.typeForm.cityId,
        brokerNameOrPhone: this.typeForm.brokerNameOrPhone,
        awardType: this.typeForm.awardType,
        companyId: this.typeForm.companyId,
        strDate: strDate,
        endDate: endDate
      };

      this.axios.post(api.getBrokerAwardHomePage, param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.rows;
          this.totalRows = res.data.data.totalRows || {};
          this.totalSize = res.data.data.total;
        }
      });
    },
    //成交详情
    view(type, idx, row) {
      this.typeForm.time = this.typeForm.time || [];
      let strDate = this.timeString(this.typeForm.time[0]);
      let endDate = this.timeString(this.typeForm.time[1]);
      let thisData = row;

      this.$router.push({
        path: "/rewardDeatil",
        query: {
          cityName: thisData.cityName,
          //cityId:thisData.cityId,
          brokerType: thisData.brokerType,
          brokerName: thisData.brokerName,
          companyName: thisData.companyName,
          brokerId: thisData.brokerId,
          awardType: thisData.awardType,
          strDate: strDate,
          endDate: endDate
        }
      });
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    getCitys() {
      this.axios.post(api.CITYLIST).then(res => {
        if (res.data.code == 200) {
          this.cityOption = res.data.data.cityList;
        }
      });
    },
    timeString(time) {
      if (!time) return "";
      return utils.getTimeString(time).slice(0, 10);
    }
    // cityChange(cityId){
    //    let thisObj = this.cityOption.find(item=>{
    //         return cityId === item.cityId;
    //       })
    //       this.cityName = thisObj.city;

    // }
  },
  computed: {},
  props: ["active"],
  watch: {
    active(val) {
      if (val === "brokerReward" && this.firstLoad) {
        this.firstLoad = false;
        this.searchList();
        this.getCitys();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
